Using the MulticolumnTreeView

The MulticolumnTreeView control extends the WPF TreeView control to support showing multiple columns in a grid or ListView-like format.

In order to use the MulticolumnTreeView, you need to provide:

An ItemTemplate of type HierarchicalDataTemplate, with its ItemsSource property set to tell the tree how to expand the hierarchy. For most cases you can use the ChildPath XAML extension to supply this—e.g. ItemTemplate=”{ms:ChildPath MyChildren}”.

One of more Columns of type GridViewColumn, to tell the tree which columns to display and what content to display in each.

Here is an example from the QuickStart sample:

CopyMulticolumnTreeView declaration

<ms:MulticolumnTreeView Name='treeView' Grid.Row='8' ItemTemplate='{ms:ChildPath Children}' Grid.Column='2'>
        <ms:MulticolumnTreeView.Columns>
          <GridViewColumn Header='Name' DisplayMemberBinding='{Binding Name}'/>
          <GridViewColumn Header='Date of Birth' DisplayMemberBinding='{Binding DateOfBirth}'/>
        </ms:MulticolumnTreeView.Columns>
      </ms:MulticolumnTreeView>

Columns can be populated using the DisplayMemberBinding, CellTemplate or CellTemplateSelector properties. See the GridViewColumn documentation in the .NET Framework SDK for more information. For examples, see the QuickStart sample.

ChildPath XAML Syntax

The ChildPath XAML extension provides a convenient way to tell the MulticolumnTreeView how to determine the children of each item in the tree. The normal syntax for ChildPath is as follows:

{ms:ChildPath MyChildPropertyPath}

If you need to use a binding expression to determine the children (for example in order to apply an IValueConverter) you can use the Binding property instead:

{ms:ChildPath Binding={Binding …}}

Customizing the Appearance of the MulticolumnTreeView

You can customize the display of the column headers using the HeaderContainerStyle, HeaderTemplate and HeaderTemplateSelector properties. Again, see the GridViewColumn documentation for details. You can customize header appearance at the control level (as opposed to the per-column level) using the ColumnHeaderContainerStyle, ColumnHeaderTemplate and ColumnHeaderTemplateSelector properties. These act as defaults for all columns, but can be overridden on a per-column basis.

You can customize the expand/collapse user interface by setting the ExpandingDecorator property. This property contains a template which the MulticolumnTreeView wraps around the leftmost column. The default template is identified by the ExpandingCellTemplateKey.

Templating the MulticolumnTreeView

When templating the MulticolumnTreeView, your template should base its layout on the WrappedColumns property, not the Columns property. This ensures that your template will inherit the expand/collapse user interface supplied by the MulticolumnTreeView. If you do not do this then users of your template will have to supply their own expand/collapse user interface as part of their CellTemplates.